<template>
  <div>
    <van-nav-bar
      fixed
      left-arrow
      :title="artcleInfo.title"
      :placeholder="true"
      :safe-area-inset-top="true"
      @click-left="$router.go(-1)"
      @click-right="
        $router.push({ path: '/editArticle', query: { type: 'add' } })
      "
    >
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
      <template #right>
        <van-icon name="weapp-nav" size="18" />
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="avatar x_y_between">
        <div class="flex x_y_center">
          <van-badge color="#FFCC30" :offset="['-5px', '44px']">
            <van-image
              round
              width="50px"
              height="50px"
              :src="artcleInfo.avatarUrl"
              fit="cover"
              @click="actionShow = true"
            />
            <template #content>
              v
            </template>
          </van-badge>
          <div class="head ml-10">
            <div class="nickname">{{ artcleInfo.nickname }}</div>
            <div class="tips mt-5">
              <span>
                {{
                  artcleInfo.pushTime && artcleInfo.pushTime.substring(0, 10)
                }}
              </span>
              <span class="ml-5">{{ artcleInfo.remarks }}</span>
            </div>
          </div>
        </div>
        <div>
          <van-tag
            type="primary"
            size="medium"
            class="smile"
            @click.stop="follow()"
          >
            <span v-if="artcleInfo.follow">已关注</span>
            <span v-else><van-icon name="plus" /> 关注</span>
          </van-tag>
        </div>
      </div>
      <div class="ql-container ql-snow mt-10 mb-10">
        <div class="ql-editor">
          <div v-html="artcleInfo.content" @click="previewImage($event)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRoute } from "vue-router";
import { Toast, ImagePreview } from "vant";
import { artcle, use } from "@/api/api.js";
import util from "@/utils/utils.js";

export default {
  name: "article",
  setup() {
    const state = reactive({
      articleId: "",
      artcleInfo: {},
      richImages: "",
    });
    let route = useRoute();
    state.articleId = route.query.articleId;
    // 初始化
    const intArticle = async () => {
      const { data: res } = await artcle.get({
        articleId: state.articleId,
        userId: JSON.parse(localStorage.getItem("user") || "{}").userId || "",
      });
      if (res.status != 0) return Toast.fail(res.message);
      state.artcleInfo = res.data;
      [
        state.artcleInfo.content,
        state.richImages,
      ] = util.addRandomAndGetPreviewImageUrlsFromRichText(
        state.artcleInfo.content
      );
    };
    // 关注与取消关注
    const follow = async () => {
      if (!JSON.parse(localStorage.getItem("user")))
        return Toast.fail("登录后才能关注!");
      const { data: res } = await use.follow({
        authorId: state.artcleInfo.authorId,
      });
      if (res.status != 0) return Toast.fail(res.message);
      state.artcleInfo.follow = !state.artcleInfo.follow;
      return Toast.success(res.message);
    };
    // 初始化加载
    onMounted(() => {
      intArticle();
    });
    const previewImage = (e) => {
      console.log(e, "e");
      if (e.target.tagName == "IMG") {
        ImagePreview({
          images: state.richImages,
          closeable: true,
          startPosition: e.target.src.split("random=")[1] - 1,
          closeOnPopstate: true, //页面回退关闭预览
        });
      }
    };
    return {
      ...toRefs(state),
      follow,
      intArticle,
      previewImage,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar--fixed {
  z-index: 1001;
}
.main {
  padding: 0 10px;
  box-sizing: border-box;
  .avatar {
    height: 50px;
    .nickname {
      font-size: 16px;
    }
    .tips {
      font-size: 12px;
      color: #999;
    }
    .smile {
      padding: 5px 15px;
      border-radius: 15px;
    }
  }
  /deep/.ql-editor {
    /* table 样式 */
    table {
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
    table td,
    table th {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 3px 5px;
    }
    table th {
      border-bottom: 2px solid #ccc;
      text-align: center;
    }

    /* blockquote 样式 */
    blockquote {
      display: block;
      border-left: 8px solid #d0e5f2;
      padding: 5px 10px;
      margin: 10px 0;
      line-height: 1.4;
      font-size: 100%;
      background-color: #f1f1f1;
    }

    /* code 样式 */
    code {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      background-color: #f1f1f1;
      border-radius: 3px;
      padding: 3px 5px;
      margin: 0 3px;
    }
    pre code {
      display: block;
    }

    /* ul ol 样式 */
    ul,
    ol {
      margin: 10px 0 10px 20px;
    }
  }
}
</style>
